<template>
	<view class="flex flex-col h-full" style="align-items: stretch;overflow: hidden;">
		<!-- <uv-navbar title="货源详情" :autoBack="true" :placeholder="true" bg-color="/static/img/bg_1.png" imgMode="aspectFill"></uv-navbar> -->
		<view class="topSty">
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('货源详情')}}-{{$t('普通')}}
			</div>
			<view>
				<route v-if="allInfo.demand.split(',').includes('1')" :allInfo="allInfo" />
			</view>
		</view>

		<div class="h-full" style="overflow: auto;">
			<view class="info_path"
				v-if="allInfo.demand_area.length > 0 || get(allInfo, 'departure.area_info.mergename') || get(allInfo, 'reach.area_info.mergename')">

				<view class="title"
					v-if="get(allInfo, 'departure.area_info.mergename') || get(allInfo, 'reach.area_info.mergename')">
					{{$t('业务路径')}}
				</view>

				<div class="path" v-if='get(allInfo, "departure.area_info.name")'>
					<view class="path_item">
						<image class="ico_p" src="/static/img/ico_p1.png" mode="widthFix"></image>
						<!-- <image class="ico_p" src="/static/img/ico_p2.png" mode="widthFix"></image> -->

						<view class="item">
							<view class="name">
								{{ get(allInfo, "departure.area_info.name") }}
							</view>
							<view class="text">
								{{ get(allInfo, "departure.area_info.mergename") }}
							</view>
							<div class="text">
								{{ get(allInfo, "departure.content") }}
							</div>
						</view>
					</view>
				</div>

				<view v-show="allInfo.demand_area.length > 0" class="path" v-for="item in allInfo.demand_area">
					<view class="path_item">
						<!-- <image class="ico_p" src="/static/img/ico_p1.png" mode="widthFix"></image> -->
						<!-- <image class="ico_p" src="/static/img/ico_p2.png" mode="widthFix"></image> -->
						<image class="ico_p" src="/static/img/ico_p3.png" mode="widthFix"></image>

						<view class="item">
							<view class="name">
								{{ get(item, 'area_info.name') || '' }}
							</view>
							<view class="text">
								{{ get(item, 'area_info.mergename') || '' }}
							</view>
							<view class="tag">
								{{ demandList[item.demand] }}
							</view>
						</view>
					</view>
				</view>

				<div class="path" v-if='get(allInfo, "reach.area_info.name")'>
					<view class="path_item">
						<image class="ico_p" src="/static/img/ico_p2.png" mode="widthFix"></image>
						<!-- <image class="ico_p" src="/static/img/ico_p2.png" mode="widthFix"></image> -->

						<view class="item">
							<view class="name">
								{{ get(allInfo, "reach.area_info.name") }}
							</view>
							<view class="text">
								{{ get(allInfo, "reach.area_info.mergename") }}
							</view>
							<div class="text">
								{{ get(allInfo, "reach.content") }}
							</div>
						</view>
					</view>
				</div>

			</view>
			<!-- <view class="">
			<view class="evenly pt-30">
					<view v-for="(item, index) in cardList" class="cardSty" :class="{ activeCard: current == index }"
						@click="changeList(index)">
						<p>{{ item }}</p>
					</view>
				</view>
			</view> -->

			<!-- 状态 1报价中 2待执行 3进行中 4已完成 5售后 -->
			<div class="flex between px-50 mt-40 mb-40" style="white-space: nowrap; overflow-x: auto;height: 70rpx;">
				<div class="fz26 text-gray-555 mr-40" v-if="allInfo.user_id == currentUserId && allInfo.status == 3 || transformKey"
					:class="{ 'font-bold fz32 infoTabActive': current == 5 }" @click="current = 5">{{$t('订单报价')}}</div>
				<div class="fz26 text-gray-555 mr-40" :class="{ 'font-bold fz32 infoTabActive': current == 0 }"
					@click="current = 0">{{$t('货物信息')}}</div>
				<div class="fz26 text-gray-555 mr-40" :class="{ 'font-bold fz32 infoTabActive': current == 3 }"
					@click="current = 3">{{$t('备注信息')}}</div>
				<div class="fz26 text-gray-555 mr-40" :class="{ 'font-bold fz32 infoTabActive': current == 1 }"
					@click="current = 1">{{$t('运输信息')}}</div>
				<div class="fz26 text-gray-555 mr-40" :class="{ 'font-bold fz32 infoTabActive': current == 2 }"
					@click="current = 2"
					v-if="allInfo.demand.indexOf('2') !== -1 || allInfo.demand.indexOf('3') !== -1 || allInfo.demand.indexOf('4') !== -1 || allInfo.demand.indexOf('5') !== -1 || allInfo.demand.indexOf('6') !== -1">

					{{$t('通关服务')}}
				</div>
				<div class="fz26 text-gray-555 mr-40" :class="{ 'infoTabActive': current == 4 }" @click="current = 4"
					v-if="get(allInfo, 'clearance_find.id')">{{$t('货物通关信息')}}
				</div>

			</div>


			<div v-if="current == 5">
				<template v-if="allInfo.demand != 1">
					<div class="p-25 info_bor" v-for="quotation in allInfo.quotation_info">
						<div class="p-20 bg-white rounded-26">
							<!-- {{ allInfo.quotation_info }} -->
							<labelItem title="承运商报价" :allInfo="allInfo"
								:value="quotation.price_unit + quotation.price" />
							<labelItem title="有效期至" :allInfo="allInfo" :value="quotation.quotation_end_at" />
							<labelItem title="合计时效" :allInfo="allInfo" :value="quotation.validity" />
							<div>
								<div class="fz28 mb-20 mt-20 text-gray-555">
									{{$t('报价说明')}}
								</div>
								<div>
									<p class="fz28 text-535">{{quotation.transport_remark.remark}}</p>
									<image :src="item.path" v-for="item in quotation.transport_attachment"
										class="w-130 h-130 mr-20"
										@click="preview(quotation.transport_attachment.map(item => item.path), item.path)">
									</image>
								</div>
							</div>
						</div>
					</div>
				</template>

				<template v-else>
					<div class="p-25 info_bor" v-for="company in allInfo.quotation_info ">
						<div class="p-20 bg-white rounded-26">
							<div class="flex">
								<image mode="aspectFill" class="w-60 h-60 rounded-26 flex-shrink-0"
									:src="image_handle(company.user.avatar)"></image>
								<div class="fz24 font-bold ml-16">{{ get(company, 'user.username') }}</div>
							</div>
							<!-- {{ allInfo.quotation_info }} -->
							<!-- 客运两用机/客运两用机/1*1*1/111/11 -->
							<!-- <labelItem title="执行车辆" :column="true" :allInfo="allInfo"
								:value="`${company.car.car_number}/${company.car.name}/${company.car.car_l}m*${company.car.car_w}m*${company.car.car_h}m/${company.car.product_weight}吨/${company.car.product_volume}立方米`" /> -->
								<view class="mt-20">
									<view class="flex">
										<p class="text-gray-535353 fz28 mt-5">{{$t('执行车辆')}}</p>
										<div class="flex">
											<view class="carBox">
												<view class="carCard">
													{{ company.car.car_number }}
												</view>
											</view>
										</div>
									</view>
									<p class="text-gray-1d1d1d">{{ company.car.name }}/ {{company.car.car_l}}m*{{company.car.car_w}}m*{{company.car.car_h}}m* / {{company.car.product_weight}}{{$t('吨')}} / {{company.car.product_volume}}{{$t('立方米')}}</p>
								</view>
								
							<!-- <labelItem v-if="transformKey" title="我的出价" :allInfo="allInfo" :value="company.price_unit + company.price" /> -->
							<labelItem title="承运方出价" :allInfo="allInfo" :value="company.price_unit + company.price" />
							<labelItem title="货主报价" :allInfo="allInfo" :value="allInfo.price_unit + allInfo.price" />
							<labelItem title="接货时间" :allInfo="allInfo" :value="company.delivery_at" />
							<labelItem title="运输速度" :allInfo="allInfo" :value="company.validity + '天'" />
						</div>
					</div>

				</template>
			</div>

			<div class="info_bor" v-if="current == 4">

				<labelItem title="是否代缴纳关税" :allInfo="allInfo"
					:value="get(allInfo, 'clearance_find.is_duties') == 1 ? '是' : '否'" />
				<labelItem title="商品名称" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.name')" />
				<labelItem title="海关编码" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.sn')" />
				<labelItem title="商品数量" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.number')" />
				<labelItem title="商品价格" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.price')" />
				<labelItem title="备注" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.content.remark')" />


				<fileItem :allInfo="allInfo" title="合同" keyName="clearance_find.attachment" />
				<fileItem :allInfo="allInfo" title="箱单" keyName="clearance_find.packing" />
				<fileItem :allInfo="allInfo" title="发票" keyName="clearance_find.invoice" />
				<fileItem :allInfo="allInfo" title="CMR" keyName="clearance_find.cmr" />
				<fileItem :allInfo="allInfo" title="货物照片" keyName="clearance_find.image" />

			</div>



			<view v-if="current == 0" class="info_bor">
				<view class="item">
					<view class="name">
						{{$t('订单编号')}}
					</view>
					<view class="info">
						{{ allInfo.order_no || '' }}
					</view>
				</view>
				<view class="item" v-if="allInfo.load_num > 0 || allInfo.unload_num > 0">
					<view class="name">
						{{$t('包含装卸')}}
					</view>
					<view class="info" style="color: #298dfe;">
						{{ allInfo.load_num }}{{$t('装')}}/{{ allInfo.unload_num }}{{$t('卸')}}
					</view>
				</view>
				<view class="item" v-if="allInfo.is_load == 1">
					<view class="name">
						{{$t('需要装卸服务')}}
					</view>
					<view class="info" >
						{{$t('是')}}
					</view>
				</view>
				<view class="item" v-if="allInfo.is_stock == 1">
					<view class="name">
						{{$t('需要仓储服务')}}
					</view>
					<view class="info" >
						{{$t('是')}}
					</view>
				</view>
				
				<view class="item">
					<view class="name">
						{{$t('货物名称')}}
					</view>
					<view class="info">
						{{ get(allInfo, "goods_info.title") || '' }}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('包装方式')}}
					</view>
					<view class="info">
						{{ get(allInfo, "goods_info.package.title") || '' }}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('装卸方式')}}
					</view>
					<view class="info">
						{{ get(allInfo, 'goods_info.unload.title') }}
					</view>
				</view>
				<view class="item" v-if="allInfo.is_load == 1">
					<view class="name">
						{{$t('装卸服务')}}
					</view>
					<view class="info" >
						{{$t('需要')}}
					</view>
				</view>
				<view class="item" v-if="allInfo.is_stock == 1">
					<view class="name">
						{{$t('仓储服务')}}
					</view>
					<view class="info" >
						{{$t('需要')}}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('货物重量')}}
					</view>
					<view class="info">
						{{ get(allInfo, "goods_info.goods_weight") + (allInfo.goods_type == 1 ? 'kg' : $t('吨'))}}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('货物体积')}}
					</view>
					<view class="info">
						{{ get(allInfo, "goods_info.goods_volume") || '' }}{{$t('立方米')}}
					</view>
				</view>
	
				<view class="item">
					<view class="name">
						{{$t('货物密度')}}
					</view>
					<view class="info">
						{{ (allInfo.goods_type == 1 ? Number(get(allInfo, 'goods_info.goods_weight') / get(allInfo, 'goods_info.goods_volume')).toFixed(2) : Number(get(allInfo, 'goods_info.goods_weight') * 1000 / get(allInfo, 'goods_info.goods_volume')).toFixed(2)) }} kg/m³
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('特殊尺寸')}}
					</view>
					<view class="info">
						<view v-for="(item, index) in allInfo.goods_info.goods_l.split(',')" class="">
							{{ get(allInfo, "goods_info.goods_l").split(',')[index] }}m *
							{{ get(allInfo, "goods_info.goods_w").split(',')[index] }}m *
							{{ get(allInfo, "goods_info.goods_h").split(',')[index] }}m</view>
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('包装总件数')}}
					</view>
					<view class="info">
						{{ get(allInfo, 'goods_info.goods_num') }}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('货物照片')}}
					</view>
				</view>
				<view v-if="allInfo.goods_info && allInfo.goods_info.attachment && allInfo.goods_info.attachment.length > 0" class="item_photo">
					<view v-for="item in allInfo.goods_info.attachment" class="">
						<image class="ph" :src="item.path"
							mode="aspectFill">
						</image>
					</view>
					
					<!-- <image class="ph" src="/static/img/ph_1.png" mode="aspectFill"></image>
				<image class="ph" src="/static/img/ph_1.png" mode="aspectFill"></image>
				<image class="ph" src="/static/img/ph_1.png" mode="aspectFill"></image> -->
				</view>
				<view class="item">
					<view class="name">
						{{$t('货物清单')}}
					</view>
				</view>
				<view class="item_cargo">
					<view v-for="item in allInfo.attachment_info" class="item_cargo_info" @click="downloadFile(item)">
						<image class="ico" src="/static/img/ico_pdf.png" mode="widthFix"></image>
						<view class="text"  v-if="item.path">
							{{ item.path.split("/")[item.path.split("/").length - 1]}}
						</view>
					</view>
					<!-- 无 -->
					<div class="center mb-50" v-if="allInfo.attachment_info.length == 0">
						<u-empty text="无货物清单" textSize="24"></u-empty>
					</div>
				</view>
				<view class="item">
					<view class="name">
						{{$t('装货时间')}}
					</view>
					<view class="info">
						{{ allInfo.delivery_at }}
					</view>
				</view>
			</view>

			<view v-if="current == 1" class="info_bor">
				<view class="item">
					<view class="name">
						{{$t('运输类型')}}
					</view>
					<view class="info">
						{{ allInfo.transport_type == 1 ? $t('整车') : $t('散货') }}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('运输方式')}}
					</view>
					<view class="info">
						{{ transportList.filter(item => item.key == allInfo.transport_way)[0].value || '' }}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('载具类型')}}
					</view>
					<view class="info">
						{{ get(allInfo, "vehicle_info.title") }}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('需求数量')}}
					</view>
					<view class="info">
						{{ get(allInfo, "goods_num") }}
					</view>
				</view>
			</view>

			<view v-if="current == 2" class="info_bor">
				<view class="item">
					<view class="name">
						{{$t('报关城市')}}
					</view>
					<view v-if="allInfo.demand_area.length > 0" class="info">
						{{ get(allInfo.demand_area.find(item => item.demand == '2'), "area_info.mergename", $t('无')) }}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('转关城市')}}
					</view>
					<view v-show="allInfo.demand_area.length > 0"
						v-for="city in allInfo.demand_area.filter(item => item.demand == '3')" class="info">
						{{ get(city, "area_info.mergename") }}
					</view>
					<div class="info" v-if="allInfo.demand_area.filter(item => item.demand == '3').length == 0">
						{{$t('无')}}
					</div>
				</view>
				<view class="item">
					<view class="name">
						{{$t('清关城市')}}
					</view>
					<view v-if="allInfo.demand_area.length > 0" class="info">
						{{ get(allInfo.demand_area.find(item => item.demand == '4'), "area_info.mergename", $t('无')) }}
					</view>
				</view>
			</view>

			<view v-if="current == 3" class="info_bor">
				<view class="item">
					<view class="name">
						{{$t('装货时间')}}
					</view>
					<view class="info">
						{{$t('现在用车')}}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('订单备注')}}
					</view>
				</view>
				<view class="item_remark">
					<!-- <uv-textarea disabled :customStyle="{ background: '#F6F7FB' }" height="200rpx"
						border="none">
						{{ get(allInfo, 'remark_info.remark') }}
					</uv-textarea> -->
					<p class="fz24 text-333 pt-14 pr-14 pl-14">{{ get(allInfo, 'remark_info.remark') }}</p>	
				</view>
				<template>

					<view class="item">
						<view class="name">
							{{$t('联系电话')}}
						</view>
						<view class="info">
							{{ allInfo.tel.substring(0, 3) }}****{{ allInfo.tel.substring(7) }}
						</view>
					</view>

				</template>
				<view class="item">
					<view class="name">
						{{$t('货主报价')}}
					</view>
					<view class="info">
						{{ currencyUtils.getSymboleByCode(allInfo.price_unit) }}{{ allInfo.price }}
					</view>
				</view>
			</view>
		</div>
		<view v-if="currentKey != 0">
			<view class="h-150"></view>
			<view class="footer_btn" @click="callTranUser">
				<view class="btn">
					{{$t('联系承运方')}}
				</view>
			</view>
		</view>
		<view v-if="transformKey">
			<view class="h-110"></view>
			<view class="footer_btn" @click="callUser">
				<view class="btn">
					{{$t('联系发货方')}}
				</view>
			</view>
		</view>
		
	</view>

</template>

<script>
import route from "./components/route.vue"
import labelItem from "../sourceInformation/components/labelItem.vue"
import fileItem from "../sourceInformation/components/fileItem.vue"
import { request_minute } from '@/api/basic'
export default {
	components: {
		route,
		labelItem,
		fileItem
	},
	data() {
		return {
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			demandList: {
				1: this.$t('运输'),
				2: this.$t('报关'),
				3: this.$t('转关'),
				4: this.$t('清关'),
			},
			currentUserId: uni.getStorageSync('user_id'),
			remarkValue: '',
			allInfo: {},
			cardList: [this.$t('货物信息'), this.$t('运输信息'), this.$t('通关服务'), this.$t('备注信息')],
			current: 0,
			transformKey: false,
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			currentKey: '',
			transportList: [
				{
					key: '0',
					value: this.$t('不限')
				},
				{
					key: '1',
					value: '其他 '
				},
				{
					key: '2',
					value: this.$t('汽运')
				},
				{
					key: '3',
					value: this.$t('空运')
				},
				{
					key: '4',
					value: this.$t('海运')
				},
				{
					key: '5',
					value: this.$t('铁路')
				},
			],
		}
	},
	methods: {
		downloadFile(item) {
			this.isMessageGo({
				action: 'downloadFile',
				data: {
					url: this.getImageUrl(item.path)
				}
			})
		},
		preview(list, current) {
			uni.previewImage({
				urls: list,
				current: current
			})
		},
		callUser() {
			if(uni.getStorageSync("user_id") == this.allInfo.user_id) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: this.allInfo.user_id || '',
				}).then(res => {
					if (res.data.data.flag == 1) {
						this.isMessageGo({
							action: 'call',
							data: {
								userId: this.allInfo.user_id || '',
								type: res.data.data.type || 1,
							}
						})
					} else {
						uni.$u.toast('积分不足，请充值积分')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
							})
						}, 500)
					}
					console.log('res0000', res)
				})
			}
		},
		callTranUser() {
			if(uni.getStorageSync("user_id") == this.allInfo.cooperate.id) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: this.allInfo.cooperate.id || '',
				}).then(res => {
					if (res.data.data.flag == 1) {
						this.isMessageGo({
							action: 'call',
							data: {
								userId: this.allInfo.cooperate.id || '',
								type: res.data.data.type || 1,
							}
						})
					} else {
						uni.$u.toast('积分不足，请充值积分')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
							})
						}, 500)
					}
					console.log('res0000', res)
				})
			}
		},
		image_handle(path) {
			return 'https://gluz-oss.oss-cn-beijing.aliyuncs.com' + path;
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
		changeList(index) {
			this.current = index
		},
	},
	onLoad(options) {
		this.allInfo = JSON.parse(options.item)
		this.currentKey = options.currentKey ? options.currentKey : ''
		this.transformKey = options.transformKey ? options.transformKey : false
		console.log('88999', JSON.parse(JSON.stringify(this.allInfo)))
	}
}
</script>

<style lang="scss">
page {
	height: 100%;
}

.infoTabActive {
	position: relative;
	color: #333;
}

.infoTabActive::after {
	content: '';
	position: absolute;
	bottom: -13rpx;
	left: 50%;
	margin-left: -27rpx;
	background: linear-gradient(to right, #278AFF, #66D6E2);
	width: 54rpx;
	height: 6rpx;
	z-index: 9;
	border-radius: 10rpx;
}

page {
	background: #F6F7FB;
	padding-bottom: 30rpx;
}

.cardSty {
	// margin-top: 27rpx;
	color: #535353;
	font-family: "PingFang SC";
	font-size: 26rpx;
	font-style: normal;
}

.activeCard {
	color: #0E0E0E;
	font-family: "PingFang SC";
	font-size: 32rpx;
	font-style: normal;
	font-weight: 600;
}

.topSty {
	border-radius: 0 0 40rpx 40rpx;
	background: #F6F7FB url("/static/bg/backcolorImg.png") no-repeat top / 100%;
	position: sticky;
	z-index: 10;
	top: 0;
	// padding-top: 20rpx;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}

.info_path {
	margin: 20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding: 0 24rpx 20rpx;

	.path {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			bottom: 0;
			border-left: 1px solid #eee;
		}

		.path_item_ico {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			align-content: flex-start;
			margin-bottom: 20rpx;

			.ico_p {
				flex-shrink: 0;
				width: 40rpx;
				margin-right: 24rpx;
				position: relative;
				z-index: 9;
			}
		}

		.path_item {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			align-content: flex-start;
			padding: 15rpx 0;
			position: relative;

			.item {
				width: 100%;

				.name {
					color: #1D1D1D;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 40rpx;
				}

				.text {
					color: #8C8C8C;
					font-size: 24rpx;
					line-height: 40rpx;
					margin-top: 10rpx;
				}

				.tag {
					width: 128rpx;
					height: 44rpx;
					flex-shrink: 0;
					border-radius: 500rpx;
					background: #D7E8FA;
					text-align: center;
					color: #278AFF;
					font-size: 22rpx;
					line-height: 44rpx;
					margin-top: 15rpx;
				}
			}

			.ico_p {
				flex-shrink: 0;
				width: 40rpx;
				margin-right: 24rpx;
				position: relative;
				z-index: 9;
			}
		}
	}

	.title {
		color: #1D1D1D;
		font-size: 30rpx;
		font-weight: 600;
		// line-height: 28rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-bottom: 1rpx solid #F0F0F0;
		margin-bottom: 15rpx;
	}
}

.info_bor {
	margin: 30rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding: 0 24rpx 20rpx;

	.item_remark {
		padding-bottom: 15rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		background-color: #F7F7F7;
		min-height: 200rpx;
		border-radius: 26rpx;
	}

	.item_cargo {
		.item_cargo_info {
			height: 88rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			background: #F6F7FB;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			margin-bottom: 16rpx;

			.ico {
				width: 32rpx;
				height: 38rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
			}

			.text {
				color: #1D1D1D;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
	}

	.item_photo {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		gap: 24rpx;
		padding: 10rpx 0 30rpx;

		.ph {
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
		}
	}

	.item {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 18rpx 0;

		.name {
			flex-shrink: 0;
			color: #535353;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-right: 30rpx;
		}

		.info {
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}

	.title {
		color: #1D1D1D;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 28rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-bottom: 1rpx solid #F0F0F0;
		margin-bottom: 15rpx;
	}
	.carBox {
		// width: 194rpx;
		// height: 44rpx;
		padding: 0;
		padding: 5rpx;
		border-radius: 6px;
		background: #FCCE00;
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.carCard {
			// width: 186rpx;
			padding: 5rpx 10rpx;
			flex-shrink: 0;
			border-radius: 6rpx;
			border: 0.5rpx solid rgba(29, 29, 29, 0.47);
			border-radius: 6rpx;
			// background: #FCCE00;
			color: #1D1D1D;
			font-size: 24rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.text-gray-535353 {
	    color: #535353;
	}
	
	.text-gray-1d1d1d {
	    color: #1d1d1d;
	    font-weight: bold;
	    font-size: 28rpx;
		text-align:right;
		margin-top:8rpx;
	}
}

.city {
	padding: 50rpx 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	background: #fff;
	border-radius: 0 0 40rpx 40rpx;
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);

	.line {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: -24rpx;

		.text {
			color: #278AFF;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 28rpx;
		}

		.ico {
			width: 50%;
		}
	}

	.citySty {
		color: #535353;
		font-family: "PingFang SC";
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		margin-top: 16rpx;
	}

	.city_item {
		flex-shrink: 0;
		display: flex;
		align-items: center;

		.ico {
			flex-shrink: 0;
			width: 50rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
		}

		.name {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}
}
.footer_btn{
	width: 100%;
	height: 128rpx;
	background: #FFF;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: fixed;
	bottom: 0;

	.btn {
		width: 94%;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		border: 2rpx solid rgba(3, 189, 130, 0.10);
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		line-height: 94rpx;
		text-align: center;
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
	}
}
</style>